<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { getMakeupList, auditMakeup, arrangeMakeup } from '../../../api/makeup'

// 申请列表数据
const applicationList = ref([])
// 表格加载状态
const loading = ref(false)
// 搜索条件
const searchForm = ref({
  studentName: '',
  studentNumber: '',
  examStatus: ''
})

// 状态选项 - 更新为与后端一致的状态码
const statusOptions = [
  { label: '待安排', value: 0 },
  { label: '已安排', value: 1 },
  { label: '已完成', value: 2 },
  { label: '已取消', value: 3 }
]

// 获取状态标签类型
const getStatusType = (status) => {
  switch (status) {
    case 0: return 'warning'  // 待安排
    case 1: return 'primary'  // 已安排
    case 2: return 'success'  // 已完成
    case 3: return 'danger'   // 已取消
    default: return 'info'
  }
}

// 分页参数
const pagination = ref({
  currentPage: 1,
  pageSize: 10,
  total: 0
})

// 获取申请列表
const getApplicationList = async () => {
  loading.value = true
  try {
    const { records, total } = await getMakeupList({
      ...searchForm.value,
      current: pagination.value.currentPage,
      size: pagination.value.pageSize
    })
    applicationList.value = records
    pagination.value.total = total
  } catch (error) {
    ElMessage.error('获取数据失败：' + error)
  } finally {
    loading.value = false
  }
}

// 处理页码改变
const handleCurrentChange = (page) => {
  pagination.value.currentPage = page
  getApplicationList()
}

// 处理每页条数改变
const handleSizeChange = (size) => {
  pagination.value.pageSize = size
  pagination.value.currentPage = 1
  getApplicationList()
}

// 审核操作
const handleAudit = async (row, status) => {
  try {
    await auditMakeup(row.makeupId, status)
    ElMessage.success('审核成功')
    getApplicationList()
  } catch (error) {
    ElMessage.error('审核失败：' + error)
  }
}

// 安排补考对话框
const arrangeDialogVisible = ref(false)
const currentMakeup = ref(null)
const arrangeForm = ref({
  examTime: '',
  examLocation: ''
})

// 打开安排补考对话框
const openArrangeDialog = (row) => {
  currentMakeup.value = row
  arrangeDialogVisible.value = true
}

// 提交安排
const handleArrange = async (status) => {
  try {
    await arrangeMakeup({
      makeupId:currentMakeup.value.makeupId,
      examTime:arrangeForm.value.examTime,
      examLocation:arrangeForm.value.examLocation,
      examStatus:status
    })
    ElMessage.success('安排成功')
    arrangeDialogVisible.value = false
    getApplicationList()
  } catch (error) {
    ElMessage.error('安排失败：' + error)
  }
}

onMounted(() => {
  getApplicationList()
})
</script>

<template>
  <div class="makeup-audit-container">
    <!-- 搜索表单 -->
    <el-form :model="searchForm" inline class="search-form">
<!--      <el-form-item label="学生姓名">-->
<!--        <el-input v-model="searchForm.studentName" placeholder="请输入学生姓名" />-->
<!--      </el-form-item>-->
      <el-form-item label="学号">
        <el-input v-model="searchForm.studentNumber" placeholder="请输入学号" />
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="searchForm.examStatus" placeholder="请选择状态" style="width: 120px">
          <el-option
            v-for="item in statusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getApplicationList">查询</el-button>
        <el-button @click="searchForm = {}">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 申请列表表格 -->
    <el-table
      v-loading="loading"
      :data="applicationList"
      border
      style="width: 100%"
    >
      <el-table-column prop="studentNumber" label="学号" />
      <el-table-column prop="studentName" label="学生姓名" />
      <el-table-column prop="testItem" label="补考项目" />
      <el-table-column prop="applyTime" label="报名时间">
        <template #default="{ row }">
          {{ new Date(row.applyTime).toLocaleString() }}
        </template>
      </el-table-column>
      <el-table-column prop="examTime" label="考试时间">
        <template #default="{ row }">
          {{ row.examTime ? new Date(row.examTime).toLocaleString() : '未安排' }}
        </template>
      </el-table-column>
      <el-table-column prop="examLocation" label="考试地点" />
      <el-table-column prop="examStatus" label="状态">
        <template #default="{ row }">
          <el-tag :type="getStatusType(row.examStatus)">
            {{ statusOptions.find(item => item.value === row.examStatus)?.label }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template #default="{ row }">
          <el-button
            v-if="row.examStatus === 0"
            type="primary"
            size="small"
            @click="openArrangeDialog(row)"
          >
            安排考试
          </el-button>
          <el-button
            v-if="row.examStatus === 0"
            type="danger"
            size="small"
            @click="handleAudit(row, 3)"
          >
            取消
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 在表格下方添加分页组件 -->
    <el-pagination
      v-model:current-page="pagination.currentPage"
      v-model:page-size="pagination.pageSize"
      :page-sizes="[10, 20, 50, 100]"
      :total="pagination.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      layout="total, sizes, prev, pager, next"
      class="pagination"
    />

    <!-- 安排补考对话框 -->
    <el-dialog
      title="安排补考"
      v-model="arrangeDialogVisible"
      width="500px"
    >
      <el-form :model="arrangeForm" label-width="100px">
        <el-form-item label="考试时间">
          <el-date-picker
            v-model="arrangeForm.examTime"
            type="datetime"
            placeholder="选择考试时间"
          />
        </el-form-item>
        <el-form-item label="考试地点">
          <el-input v-model="arrangeForm.examLocation" placeholder="请输入考试地点" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="arrangeDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleArrange(1)">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
.makeup-audit-container {
  padding: 20px;
}

.search-form {
  margin-bottom: 20px;
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
}

.pagination {
  margin-top: 20px;
  justify-content: flex-end;
}
</style>